.agentTestPage {
  width: 100%;
  flex: 1;
  margin-top: 15px;

  // background: #fff;
  .agentApp {
    display: flex;
    min-height: 70vh;


  }

  .agentSidebar {
    width: 260px;
    display: flex;
    flex-direction: column;
    background: #fff;

    .agentHistory {
      flex: 1;
      position: relative;

      .agentTopics {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        overflow-x: hidden;

        .chatActive {
          position: relative;
          padding: 0 0 0 10px;

          &::after {
            content: '';
            display: block;
            width: 3px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background: #1677ff;
          }
        }

        .chatTitle {
          width: 90%;
          height: 30px;
          line-height: 30px;
          margin: 10px auto 0;
          font-size: 16px;
          color: #5a5a5a;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }
      }
    }
  }

  .agentChatbox {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #F5F6F7;

    .chatRow {
      display: flex;
      margin-top: 30px;

      .questionIcon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #c8deff;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .answerIcon {
        width: 32px;
        height: 32px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .chatAnswer {
      .chatWord {
        background: #ffffff;
        padding: 16px 16px 12px 16px;
        min-height: 56px;
        line-height: 24px;

        .dots {
          display: inline-block;
          font-size: 14px;
          color: #9b9b9b;

          span {
            display: inline-block;
            font-weight: bold;
            opacity: 0;
          }

          span:nth-child(1) {
            animation: dot1 1.6s steps(1, end) infinite;
          }

          span:nth-child(2) {
            animation: dot2 1.6s steps(1, end) infinite;
          }

          span:nth-child(3) {
            animation: dot3 1.6s steps(1, end) infinite;
            // animation-delay: 1.2s;
          }
        }
      }

      .evaluate {
        position: relative;
        height: 38px;

        .options {
          position: absolute;
          top: 8px;
          right: 0;
        }
      }
    }

    .chatContent {
      flex: 1;
      margin-left: 12px;
      width: 0;

      .chatRole {
        font-size: 16px;
        font-weight: bold;
        color: #262626;
      }

      .chatWord {
        font-size: 14px;
        color: #3f3f3f;
        line-height: 24px;
        border-radius: 10px;
        margin-top: 6px;
        word-wrap: break-word;
      }
    }

    .agentView {
      flex: 1;
      display: flex;
      flex-direction: column;

      .agentArea {
        width: 982px;
        margin: 0 auto;
        flex: 1;
        position: relative;
      }

      .agentDefault {
        position: absolute;
        inset: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      // .defaultCell {
      //   display: inline-block;
      // }

      .agentRecord {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0px 50px 0 50px;
        margin-bottom: 30px;
      }

      .defaultIcon {
        display: flex;
        justify-content: center;
      }

      .defaultText {
        color: #071127;
        font-size: 28px;
        margin-top: 22px;
      }
    }

    .agentInput {
      height: 180px;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
      padding-bottom: 30px;

      .inputCell {
        flex: 1;
        position: relative;
        width: 900px; // 80%

        .agentOperate {
          // background: rgb(240, 151, 151);
          height: 48px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0.6;
          display: flex;
          justify-content: end;
          // align-items: center;

          .operateBtn {
            width: 38px;
            height: 38px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #f3f3f3;
            border-radius: 5px;
            margin-right: 16px;
          }

          .operateDisabled {
            cursor: not-allowed;
          }
        }
      }


    }
  }
}

@keyframes dot1 {

  // 0%,
  // 20% {
  //   opacity: 0;
  // }

  0% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dot2 {

  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes dot3 {

  0% {
    opacity: 0;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
